<template>
  <el-header class="me-area">
		<el-row class="me-header">
			
			  <el-col :span="4" class="me-header-left">
			  	 <router-link to="/" class="me-title">
			  	 	<img src="../assets/img/logo.png"/>
			  	</router-link>
			  </el-col>
			  
			  <el-col v-if="!simple" :span="16">
			  	<el-menu :router=true menu-trigger="click" active-text-color="#5FB878" :default-active="activeIndex" mode="horizontal" >
					  <el-menu-item index="/">首页</el-menu-item>
					  <el-menu-item index="/category/all">文章分类</el-menu-item>
					  <el-menu-item index="/tag/all">标签</el-menu-item>
					  <el-menu-item index="/log">日志</el-menu-item>
					  <el-menu-item index="/messageBoard">留言板</el-menu-item>
					  
					  <el-col :span="4" :offset="4">
					  	<el-menu-item index="/write"><i class="el-icon-edit"></i>写文章</el-menu-item>
					  </el-col>
					  
					</el-menu>
			  </el-col>
			  
			  <template v-else>
			  	<slot></slot>
			  </template>
			  
			  <el-col :span="4">
				  <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#5FB878">
				  	
				  	<template v-if="!user.login">
					  	<el-menu-item index="/login"><el-button type="text">登录</el-button></el-menu-item>
							<el-menu-item index="/register"><el-button type="text">注册</el-button></el-menu-item>
						</template>
						
						<template v-else>	
						  <el-submenu index>
							    <template slot="title">
										<img class="me-header-picture" :src="user.avatar" />						    	
							    </template>
							    <el-menu-item index @click="logout"><i class="el-icon-back"></i>退出</el-menu-item>
							</el-submenu>
						</template>
					</el-menu>	
				</el-col>
				
		</el-row>
	</el-header>
</template>

<script>
export default {
  name: 'BaseHeader',
  props:{
  	activeIndex:String,
  	simple:{
      type: Boolean,
      default: false
    }
  },
  data() {
  	return {
  	}
  },
  computed:{
  	user() {
  		let login = this.$store.state.account.length != 0
  		let avatar = this.$store.state.avatar
  		return {
  			login, avatar
  		}
  	}
  },
  methods:{
  	logout(){
  		let that = this
  		this.$store.dispatch('logout').then(() => {
				this.$router.push({ path: '/' })
			}).catch((error) => {
				if(error !== 'error'){
					that.$message({message: error,type: 'error',showClose: true});
				}
  		})
  	}
  }
}
</script>

<style>

.el-header {
  position: fixed;
  z-index: 1024;
  min-width: 100%;
  box-shadow: 0 2px 3px hsla(0,0%,7%,.1), 0 0 0 1px hsla(0,0%,7%,.1);
}
  
.me-title{
	margin-top: 10px;
	font-size: 24px ;
}

.me-header-left{
		margin-top: 10px;
}
.me-title img{
	max-height: 2.4rem;
	max-width: 100%;
}
.me-header-picture {
	width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
}
</style>